<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="步骤1" description="选择生成的文件配置"/>
      <el-step title="步骤2" description="选择代码使用的技术"/>
      <el-step title="步骤3" description="上传sql生成代码"/>
    </el-steps>
    <generate-config v-if="active == 0" ref="generateConfig"/>
    <user-choose v-if=" active == 1" ref="userChoose"/>
    <table-info v-if="active == 2" ref="tableInfo" :templateConfig="templateConfig"/>
    <el-button style="margin-top: 12px;" @click="prev" v-if="active != 0">上一步</el-button>
    <el-button style="margin-top: 12px;" @click="next" v-if="active != 2">下一步</el-button>
    <el-button style="margin-top: 12px;" @click="submit" v-if="active == 2">完成</el-button>
  </div>
</template>
<script>
  import GenerateConfig from "@/components/GenerateConfig/index";
  import UserChoose from "@/components/UserChoose/index";
  import TableInfo from "@/components/TableInfo/index";
  export default {
    components: {TableInfo, UserChoose, GenerateConfig},
    data() {
      return {
        active: 0,
        templateConfig:{
          generateConfig:{},
          userChoose:{},
        }
      };
    },

    methods: {
      prev() {
        if(this.active-- < 0) this.active = 0;
      },
      next() {
        console.log(this.templateConfig)
        if (this.active == 0){
          this.templateConfig.generateConfig = this.$refs.generateConfig.generateConfig
        }
        if(this.active == 1){
          this.templateConfig.userChoose = this.$refs.userChoose.userChoose
        }
        if (this.active++ > 2) this.active = 0;
      },
      submit(){
        this.$message.success('提交成功')
      }
    }
  }
</script>

